<template>
	<div>
		<mt-cell title="姓名">
			<mt-field placeholder="请输入" :state="userInfo.name!=''&&userInfo.name!=undefined?'success':'error'" v-model="userInfo.name"></mt-field>
		</mt-cell>
		<mt-cell title="请填写使用本人信息开通的银行卡号">
			<img slot="icon" src="../../../../assets/img/tips.png" width="16" height="16">
		</mt-cell>
		<mt-cell title="银行卡号">
			<mt-field placeholder="请输入" v-model="userInfo.acctNo"></mt-field>
		</mt-cell>
		<div class="select" @click="popupVisible = true">
			<mt-cell title="证件类型" is-link>
				<span :class="{'activeSelect':currentTags.name}">{{currentTags.name?currentTags.name: '请选择分类'}}</span>
			</mt-cell>
		</div>
		<mt-popup v-model="popupVisible" position="bottom" class="mint-popup popupClass">
			<mt-picker :slots="dataList" v-show="popupVisible" class="popupClass" :visible-item-count="5" :show-toolbar="true"
			 ref="picker" value-key="name">
				<mt-button @click="handleConfirm" size="large">确认</mt-button>
			</mt-picker>
		</mt-popup>
		<mt-cell title="证件号">
			<mt-field placeholder="请输入" v-model="userInfo.certNo"></mt-field>
		</mt-cell>
		<mt-cell title="请填写开通于上述银行卡号的证件信息">
			<img slot="icon" src="../../../../assets/img/tips.png" width="16" height="16">
		</mt-cell>
		<mt-cell title="同意XXX条款">
			<mt-switch v-model="userInfo.isAgree"></mt-switch>
		</mt-cell>
		<mt-button type="danger" size="large" @click.native="handleCertificate" style="margin:10px 0">实名认证</mt-button>
		<mt-button type="danger" size="large" @click.native="giveUpCertificate" plain>放弃认证</mt-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {

				},
				popupVisible: false,
				currentTags: {},
				tagList: [{
						name: "居民身份证",
						value: "01"
					},
					{
						name: "军官证",
						value: "02"
					}, {
						name: "护照",
						value: "03"
					}, {
						name: "回乡证",
						value: "04"
					}, {
						name: "台胞证",
						value: "05"
					}, {
						name: "警官证",
						value: "06"
					}, {
						name: "士兵证",
						value: "07"
					}, {
						name: "其它证件",
						value: "99"
					}
				]
			}
		},
		computed: {
			dataList() {
				let dateSlots = [{
					flex: 1,
					values: this.tagList,
					className: 'slot1',
					textAlign: 'center'
				}];
				return dateSlots
			}
		},
		mounted(){
		},
		methods: {
			handleCertificate() {
         this.$ajax.post(this, this.$api.PERSONAL_CERTIFICATE_POST, this.userInfo, (res) => {});
			},
			giveUpCertificate() {
				this.$messagebox({
					title: '是否确认放弃实名认证',
					message: '<div>未经实名认证，无法线上签署租约、查看租约、支付账单等租中、租后业务</div>',
					showCancelButton: true,
					confirmButtonText: "确认",
					cancelButtonText: "取消"
				}).then(action => {
					if (action == 'confirm') {
						console.log('确认')

					} else {
						console.log('取消')
					}

				})
			},
			handleConfirm() {
				this.currentTags = this.$refs.picker.getValues()[0];
				this.userInfo.reportType = this.$refs.picker.getValues()[0].value;
				this.popupVisible = false
			}
		}

	}
</script>

<style scoped>
	.slot1,
	.popupClass {
		width: 100%;
	}

</style>
